<template>
<!-- 新闻列表 -->
  <!-- scroll-wrapper 这个类名在全局样式中有设置 -->
  <div class="scroll-wrapper" @scroll='hScroll' ref="refScroll">
    {{channel.name}}的内容
    <!-- <p v-for="idx in 20" :key="idx">
      第{{idx}}条文章
    </p> -->
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
          <van-cell
          v-for="article in list"
          :key="article.art_id.toString()"
          :title="article.title"
           @click="$router.push({name: 'Article', params:{id:article.art_id.toString()}})" :border="false">
            <div slot="label">
              <!-- 图片： 可能出现三种情况： 0 1  3
              article.cover.images:[]
              、 -->
              <van-grid :column-num="article.cover.images.length">
                <van-grid-item v-for="(img, idx) in article.cover.images" :key="idx" icon="photo-o">
                  <van-image lazy-load :src="img" />
                </van-grid-item>
                <!-- 文字说明 -->
              <div class="meta">
                <span>{{article.aut_name}}</span>
                <span>{{article.comm_count}}评论</span>
                <span>{{article.pubdate | relativeTime}}</span>
                  <!-- 如果是登陆用户(有没有token)，则显示x按钮 -->
                  <!--
                    @click.stop="hClose(article)"  这个要阻止冒泡
                   -->
                  <span class="close" @click.stop="hClose(article)" v-if="$store.getters.isLogin">
                     <van-icon name="cross"></van-icon>
                  </span>
              </div>
              </van-grid>
            </div>
          </van-cell>
        </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
export default {
  name: 'ArticleList',
  // props: ['channel'],
  // 接收父组件传递过来的id值
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 时间戳
      timestamp: null,
      list: [], // 数据项
      loading: false, // 是否正在加载。。。
      finished: false, // 是否所有的数据全部加载完成
      // 下拉刷新
      isLoadingNew: false
    }
  },
  activated () {
    console.log('激活')
    this.$refs.refScroll.scrollTop = this.scrollTop
  },
  deactivated () {
    console.log('失活')
  },
  created () {
    console.log('articleList被创建了', Date.now())
    // TODO 开启监听事件总线上的'delArticle'事件。
    this.$eventBus.$on('delArticle', (obj) => {
      // articleId 频道id
      // channelId 文章id
      const { articleId, channelId } = obj
      console.log('我这里时', this.channel, '收到了事件qhjpl', obj)
      // 去在当前的文章列表中搜索是否有，编号时articleId的文章
      // 如果找到了就删除
      // 删除文章
      this.delArticle(articleId, channelId)
    })
  },
  methods: {
    delArticle (articleId, channelId) {
      console.log('11111', articleId, channelId)
      // 检查频道id
      if (this.channel.id !== channelId) {
        console.log(this.channel, '这不是我的频道，我不用进一步去搜索')
        return
      }
      const idx = this.list.findIndex(item => {
        return item.art_id.toString() === articleId
      })
      if (idx !== -1) {
        // 如果找到了就删除
        this.list.splice(idx, 1)
      }
    },
    // 用户点击了关闭按钮
    hClose (article) {
      // 1. 获取当前的文章编号
      const id = article.art_id.toString()
      // ===========================================================================
      // 通知父组件index.vue去显示弹层
      this.$emit('showMoreAction', id)
    },
    // 下拉刷新
    async onRefresh () {
      // 1. 去取回最新的文章 .传入最新的时间戳
      const result = await getArticles(this.channel.id, Date.now())
      // 2. 把文章追加到 list 的 头部
      const arr = result.data.data.results
      this.list.unshift(...arr)
      // 3. 提示更新结果
      this.$toast.success('刷新成功' + arr.length + '条')
      // 4. 结束loading状态
      this.isLoadingNew = false
    },
    async onLoad () {
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const res = await getArticles(this.channel.id, this.timestamp)
      // 更新时间戳
      this.timestamp = res.data.data.pre_timestamp
      const arr = res.data.data.results
      console.log('我是', arr)
      // 2把数据追加到list
      // 因为arr是数组，每一个元素都是一个对象，表示当前的一个文章
      //  加... 是把arr的元素追加到list中
      this.list.push(...arr)
      // 3加载状态结束
      this.loading = false
      // 4判断是否全部加载完
      if (arr.length === 0) {
        this.finished = true
      }
    },
    hScroll () {
      // 监听用户滚动条
      // 保存一写
      console.log(this.$refs.refScroll.scrollTop)
      //  对象普通的属性，不是响应式的数据
      this.scrollTop = this.$refs.refScroll.scrollTop
    }
  }

}
</script>
<style scoped lang='less'>
.meta {
  display: flex;
  width: 100%;
  span{
    margin-right: 10px;
  }
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
